<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <style>
      .first-loading-wrp {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 90vh;
        min-height: 90vh;
      }
 
      .first-loading-wrp > h1 {
        font-size: 30px;
        font-weight: bolder;
      }
 
      @keyframes loading__scale-to-up{
        from {
          transform: scale(1, 0.2);
        }
        to {
          transform: scale(1, 1);
        }
      }
 
      .first-loading-wrp .loading-wrp i{
        background-color: #409eff;
        display: inline-block;
        width: 5px;
        height: 50px;
        border-radius: 5px;
      }
      .splash__item + .splash__item {
        margin-left: 10px;
      }
 
      .first-loading-wrp .loading-wrp .splash__item {
        animation: loading__scale-to-up 0.5s linear infinite alternate-reverse;
        animation-delay: calc(var(--i) + 0s);
      }
    </style>
  </head>
  <body>
    <div id="app">

      <div class="first-loading-wrp">
        <div class="loading-wrp">
            <i class="splash__item" style="--i: .1s"></i>
            <i class="splash__item" style="--i: .2s"></i>
            <i class="splash__item" style="--i: .3s"></i>
            <i class="splash__item" style="--i: .4s"></i>
            <i class="splash__item" style="--i: .5s"></i>
            <i class="splash__item" style="--i: .6s"></i>
            <i class="splash__item" style="--i: .7s"></i>
            <i class="splash__item" style="--i: .8s"></i>
        </div>
        <!-- <h1>加载中...</h1> -->
      </div>
    </div>
    <script type="text/javascript">
      let sid = 'c2fcb68f-26ed-4d57-a765-4219176bb1e2';
      // let sid = '<#sid>';
    </script>
    <script type="module" src="/src/main.js"></script> 
  </body>
</html>
